<template>
  <layout-slot class="down-page" :bodyImage="bodyImage" :reArticle="reArticle">
    <article class="main-content page-page">
      <div class="post-header">
        <h1 class="post-title" itemprop="name headline">
          {{ downDetail.title}} </h1>
        <div class="post-data">
          <time datetime="2020-04-27T23:04:00+08:00" itemprop="datePublished"><i class="fa fa-clock-o"
                                                                                 aria-hidden="true"> </i> {{ downDetail.date |  dateFormat('{y}-{m}-{d}') }}
          </time>&nbsp;&nbsp; <i class="fa fa-comments-o" aria-hidden="true"></i> <a href="#comments"> {{ comments }} 评论</a>&nbsp;&nbsp;
          <i class="fa fa-eye" aria-hidden="true"></i> {{ downDetail.view }} 浏览
        </div>
      </div>
      <div id="post-content" class="post-content" v-html="downDetail.intro">
      </div>
    </article>
    <twikoo/>
  </layout-slot>
</template>

<script>


  import { getMoviesDetail, getReArticle, recordCount } from '~/api'

  export default {
    name: "download",
    data() {
      return {
        downInfo: {},
        bodyImage: require('@/assets/img/bg.png'),
        download: [
          {
            title: "",
            children: [
              {name: "Adobe Photoshop 2021", link: "https://sharewh.chaoxing.com/share/d0d42df0-4d31-424b-8fea-ec272c9f638c?t=3", isStrong: true},
            ]
          },
          {
            title: "API中文文档",
            children: [
              // {name: "v2rayN-V3.28.zip", link: "https://cdn.rawchen.com/files/v2rayN-V3.28.zip"},
              // {name: "v2rayNG_V1.5.16.apk", link: "https://cdn.rawchen.com/files/v2rayN-V3.28.zip"},
              // {name: "Resource_Hacker 5.1.5", link: "https://cdn.rawchen.com/files/v2rayN-V3.28.zip"}
            ]
          }
        ],
        downDetail:{},
        reArticle:[]
      }
    },
    computed:{
      comments(){
        return this.$store.state.comments
      }
    },
    methods:{

    },
    mounted() {

    },
    async asyncData({app}){
      let downDetail = {}
      await  getMoviesDetail(app.$axios,{path: "/download"}).then(({data}) => {
        downDetail ={
          intro:data.data.articleContent,
          date:data.data.articleUpdated,
          view:data.data.articleViewCount,
          comments:data.data.articleCommentCount,
          title:data.data.articleTitle
        }

        // 记录浏览量
        recordCount(app.$axios,{id: data.data.oId}).then((res) => {
        })

      })
      let reArticle = await getReArticle(app)
      return {downDetail,reArticle}
    }
  }
</script>

<style lang="scss" scoped>
  .page-page {
    max-width: 970px;
    // padding: 130px 25px 20px;;
  }


  .down-page {
    background-repeat: repeat;
  }

  .post-content pre code {
    border-radius: 6px;
    /* max-height: 500px; */
    line-height: 20px;
    margin: 0;
    padding: 1.3em;

    background-color: #2b2e33;
  }

  .post-content p a {
    color: #4c94dd;
    border-bottom: 1px dotted #ccc;
    position: relative;
  }

  .post-content p a::after {
    background: currentColor;
    content: '';
    height: 2px;
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    transition: width .2s ease;
    width: 0;
  }

  .post-content p a:hover::after {
    width: 100%;
  }
</style>
